<!-- **i18n版本-->
<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-form v-if="crud.props.searchToggle" size="small" label-width="120px">
        <!-- 搜索 -->
        <el-row :gutter="10">
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <!--设备型号ID-->
            <el-form-item :label="tf('deviceModelId')">
              <el-input v-model="query.deviceModelId" clearable :placeholder="tf('deviceModelId')" class="filter-item" @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <!--设备名称-->
            <el-form-item :label="tf('deviceName')">
              <el-input v-model="query.deviceName" clearable :placeholder="tf('deviceName')" class="filter-item" @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <!--机构代码-->
            <el-form-item :label="tf('orgCode')">
              <el-input v-model="query.orgCode" clearable :placeholder="tf('orgCode')" class="filter-item" @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <!--所属机构-->
            <el-form-item :label="tf('orgName')">
              <el-input v-model="query.orgName" clearable :placeholder="tf('orgName')" class="filter-item" @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <!--设备ip-->
            <el-form-item :label="tf('deviceIp')">
              <el-input v-model="query.deviceIp" clearable :placeholder="tf('deviceIp')" class="filter-item" @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <!--设备mac地址-->
            <el-form-item :label="tf('macAddress')">
              <el-input v-model="query.macAddress" clearable :placeholder="tf('macAddress')" class="filter-item" @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <!--启用标志-->
            <el-form-item :label="tf('enableFlag')">
              <Dictionary v-model="query.enableFlag" :updata-dict="query.enableFlag" :dict-key="'FILTER_FLAG'" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <!--删除标志-->
            <el-form-item :label="tf('deleteFlag')">
              <Dictionary v-model="query.deleteFlag" :updata-dict="query.deleteFlag" :dict-key="'DELETE_FLAG'" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6" />
          <el-col :xs="24" :sm="20" :md="6" :lg="6" :xl="6">
            <el-form-item label="" label-width="28px">
              <rrOperation :crud="crud" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--more-button ,slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />

      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="75%">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="20" :md="cols" :lg="cols" :xl="cols">
              <!--设备型号ID" -->
              <el-form-item :label="tf('deviceModelId')" prop="deviceModelId">
                <el-input v-model="form.deviceModelId" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="cols" :lg="cols" :xl="cols">
              <!--设备名称" -->
              <el-form-item :label="tf('deviceName')" prop="deviceName">
                <el-input v-model="form.deviceName" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="cols" :lg="cols" :xl="cols">
              <!--机构代码" -->
              <el-form-item :label="tf('orgCode')" prop="orgCode">
                <el-input v-model="form.orgCode" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="cols" :lg="cols" :xl="cols">
              <!--所属机构" -->
              <el-form-item :label="tf('orgName')" prop="orgName">
                <el-input v-model="form.orgName" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="cols" :lg="cols" :xl="cols">
              <!--设备ip" -->
              <el-form-item :label="tf('deviceIp')" prop="deviceIp">
                <el-input v-model="form.deviceIp" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="cols" :lg="cols" :xl="cols">
              <!--设备mac地址" -->
              <el-form-item :label="tf('macAddress')" prop="macAddress">
                <el-input v-model="form.macAddress" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="cols" :lg="cols" :xl="cols">
              <!--日志级别" -->
              <el-form-item :label="tf('logLevel')">
                <el-input v-model="form.logLevel" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="cols" :lg="cols" :xl="cols">
              <!--启用标志" -->
              <el-form-item :label="tf('enableFlag')" prop="enableFlag">
                <Dictionary v-model="form.enableFlag" :updata-dict="form.enableFlag + ''" :dict-key="'FILTER_FLAG'" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="20" :md="cols" :lg="cols" :xl="cols">
              <!--删除标志" -->
              <el-form-item :label="tf('deleteFlag')">
                <Dictionary v-model="form.deleteFlag" :updata-dict="form.deleteFlag + ''" :dict-key="'DELETE_FLAG'" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="cols = 24 / 2">2列</el-button>
          <el-button type="text" @click="cols = 24 / 3">3列</el-button>
          <el-button type="text" @click="cols = 24 / 4">4列</el-button>
          <span style="width: 200px" />
          <el-button type="text" @click="crud.cancelCU">{{ $t('btn.cancel') }}</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">{{ $t('btn.confirm') }}</el-button>
        </div>
      </el-dialog>

      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="deviceModelId" :label="tf('deviceModelId')" />
        <el-table-column prop="deviceName" :label="tf('deviceName')" />
        <el-table-column prop="orgCode" :label="tf('orgCode')" />
        <el-table-column prop="orgName" :label="tf('orgName')" />
        <el-table-column prop="deviceIp" :label="tf('deviceIp')" />
        <el-table-column prop="macAddress" :label="tf('macAddress')" />
        <el-table-column prop="logLevel" :label="tf('logLevel')" />
        <el-table-column prop="enableFlagCn" :label="tf('enableFlag')" />
        <el-table-column prop="deleteFlagCn" :label="tf('deleteFlag')" />
        <el-table-column prop="updateBy" :label="tf('updateBy')" />
        <el-table-column prop="updateTime" :label="tf('updateTime')" />
        <!-- v-if="checkPer(['admin','deviceInfo:edit','deviceInfo:del'])"-->
        <el-table-column :label="$t('btn.operationCol')" width="200px" align="center">
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />

      <preview ref="previewForm" :module="i18nQry.module" />
    </div>
  </div>
</template>

<script>
import crudDeviceInfo from '@/api/deviceInfo'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import preview from './component/detail'
import Dictionary from '@/components/Dictionary/index'
import i18nHandler from '@/mixins/i18nHandler'
import i18n from '@/lang'

const defaultForm = { id: null, deviceModelId: null, deviceName: null, orgCode: null, orgName: null, deviceIp: null, macAddress: null, logLevel: null, enableFlag: null, deleteFlag: null, createBy: null, createTime: null, updateBy: null, updateTime: null, version: null }

/** ui国际化初始化参数,菜单模块 menu_code**/
const i18nQry = { module: 'DeviceInfo', refer: 't_device_info,t_device_log_detail:r0,t_device_model:r1' }

export default {
  name: 'DeviceInfo',
  components: { Dictionary, pagination, crudOperation, rrOperation, udOperation, preview },
  mixins: [presenter(), header(), form(defaultForm), crud(), i18nHandler],

  cruds() {
    return CRUD({ title: i18n.t('DeviceInfo.moduleName'), url: 'business/deviceInfo/pageList', idField: 'id', sort: 'id', order: 'DESC', crudMethod: { ...crudDeviceInfo }})
  },
  data() {
    return {
      cols: 12,
      permission: {
        add: 'deviceInfoController#insert',
        edit: 'deviceInfoController#update',
        del: 'deviceInfoController#deleteById',
      },
      dictionarys: [],
      rules: {
        deviceModelId: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.deviceModelId') }), trigger: 'blur' }],
        deviceName: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.deviceName') }), trigger: 'blur' }],
        orgCode: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.orgCode') }), trigger: 'blur' }],
        orgName: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.orgName') }), trigger: 'blur' }],
        deviceIp: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.deviceIp') }), trigger: 'blur' }],
        macAddress: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.macAddress') }), trigger: 'blur' }],
        enableFlag: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.enableFlag') }), trigger: 'blur' }],
        createTime: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.createTime') }), trigger: 'blur' }],
      },
    }
  },
  created() {
    this.moduleI18nInit(i18nQry)
    this.crud.optShow = { add: true, edit: true, preview: true, del: false, download: false, reset: true }
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
  },
}
</script>

<style scoped></style>
